<template>
    <div class="wrap">
        <el-header :title="'篱笆闲聊'"></el-header>
        <div class="con">
            <!-- 昵称 标题 内容 时间 -->
            <ul>
                <el-item v-for="(item,index) in list" :key="index" 
                    :head="item.head"
                    :nickname="item.nickname"
                    :title="item.title"
                    :con="item.con"
                    :time="item.time"
                ></el-item>
            </ul>
        </div>
        <button class="open">发布</button>
    </div>
</template>

<script>
import elHeader from './components/el-header';
import elItem from './components/el-item';
export default {
    components:{
        elHeader,
        elItem
    },
    data(){
        return {
            list:[]
        }
    },
    created(){
        this.$http.get('/api/list').then((res) => {
            console.log(res);
            if(res.data.code === 1){
                this.list = res.data.data;
            }
        }).catch((error) => {
            console.warn(error)
        })
    }
}
</script>

<style lang="scss">
*{
    margin:0;
    padding:0;
}

ul li{
    list-style: none;
}
html,body{
    width:100%;
    height: 100%;
    overflow: hidden;
}
.wrap{
    width:100%;
    height:100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .con{
        width:100%;
        flex:1;
        overflow: scroll;
    }
    .open{
        width:100%;
        height:44px;
        background: gray;
        flex-shrink: 0;
    }
}
</style>
